import 'package:flutter/material.dart';
import 'package:flutter_parallax_effect_study/card_content.dart';

import 'card_model.dart';
import 'dart:math' as math;

class SlidingCardsView extends StatefulWidget {
  const SlidingCardsView({super.key});

  @override
  State<SlidingCardsView> createState() => _SlidingCardsViewState();
}

class _SlidingCardsViewState extends State<SlidingCardsView> {
  late PageController pageController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    pageController = PageController(viewportFraction: 0.8);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    pageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        height: MediaQuery.of(context).size.height * 0.55,
        child: PageView.builder(
          controller: pageController,
          itemCount: demoData.length,
          itemBuilder: (context, index) {
            return AnimatedBuilder(
                animation: pageController,
                builder: (context, child) {
                  double pageOffset = 0;
                  if (pageController.position.hasContentDimensions) {
                    pageOffset = pageController.page! - index;
                  }
                  // 高斯函数用于创建平滑的过渡效果
                  double gauss =
                      math.exp(-(math.pow(pageOffset.abs() - 0.5, 2) / 0.08));
                  return Transform.translate(
                    offset: Offset(-32 * gauss * pageOffset.sign, 0),
                    child: Container(
                      margin:
                          const EdgeInsets.only(left: 8, right: 8, bottom: 24),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(32),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.1),
                              offset: const Offset(8, 20),
                              blurRadius: 24,
                            )
                          ]),
                      child: Column(
                        children: [
                          ClipRRect(
                            borderRadius: const BorderRadius.vertical(
                                top: Radius.circular(32)),
                            child: Image.asset(
                              "assets/${demoData[index].image}",
                              height: MediaQuery.of(context).size.height * 0.3,
                              fit: BoxFit.none,
                              alignment: Alignment(pageOffset, 0),
                            ),
                          ),
                          const SizedBox(
                            height: 8,
                          ),
                          Expanded(
                              child: CardContent(
                            name: demoData[index].name,
                            date: demoData[index].date,
                          ))
                        ],
                      ),
                    ),
                  );
                });
          },
        ));
  }
}
